﻿@model Model.Database.Role
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>修改角色</title>
    <link href="~/Content/Scripts/ZTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <link href="~/Content/Scripts/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/Scripts/h-ui/css/HuiFold.css" rel="stylesheet" />

    <style>
        body {
            overflow-x: hidden;
        }

        .table {
            width: 100%;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 10px;
            text-align: center;
        }

        .leftTd {
            width: 30%;
            font-weight: bold;
        }

        .rightTd {
            width: 70%;
        }

        .ztree {
            margin-top: 10px;
        }

        textarea {
            resize: none;
        }
    </style>
    <!--引入脚本解决兼容性(hack技术，必须放入head中)-->
    <!--[if lt IE 9]>
        <script src="~/Content/Scripts/html5_css3/html5shiv.min.js"></script>
        <script src="~/Content/Scripts/html5_css3/respond.min.js"></script>
        <script src="~/Content/Scripts/PIE-2.0beta1/PIE_IE678.js"></script>
    <![endif]-->
</head>
<body>
    <form id="form1" method="post">
        <ul id="Huifold1" class="Huifold">
            <li class="item">
                <h4>基础信息<b>-</b></h4>
                <div class="info">
                    <table class="table table-bordered table-hover table-condensed">
                        <input type="hidden" name="id" value="@Model.RoleId"/>
                        <tr>
                            <td class="leftTd">角色名称</td>
                            <td class="rightTd">
                                <input type="text" id="roleName" name="RoleName" value="@Model.RoleName" class="form-control" placeholder="角色名称" />
                            </td>
                        </tr>
                        <tr>
                            <td class="leftTd">描述</td>
                            <td class="rightTd">
                                <textarea rows="3" id="description" name="Description" class="form-control" placeholder="描述">@Model.Description</textarea>
                            </td>
                        </tr>
                    </table>
                </div>
            </li>
            <li class="item">
                <h4>权限分配<b>-</b></h4>
                <div class="info">
                    <input type="hidden" id="powerIdStr" name="PowerIdStr" />
                    <ul id="tree1" class="ztree" style="margin-bottom:10px;padding:0;"></ul>
                </div>
            </li>
        </ul>
        <div class="row" style="margin-top:10px;margin-bottom: 10px;">
            <div class="col-xs-3 col-xs-offset-3">
                <button id="submitBtn" type="submit" class="btn btn-success" style="margin:0 auto;display: block;">保存</button>
            </div>
            <div class="col-xs-3">
                <button type="reset" class="btn btn-danger" style="margin: 0 auto; display: block;">重置</button>
            </div>
        </div>
    </form>
</body>
</html>
<script src="~/Content/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Content/Scripts/h-ui/js/H-ui.js"></script>
<script src="~/Content/Scripts/ZTree/js/jquery.ztree.all.min.js"></script>
<script src="~/Content/Scripts/layer/2.1/layer.js"></script>

<script src="~/Content/Scripts/TxyJs.js"></script>
<script>
    var iframeIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引
    var tree;// zTree 的参数配置
    var setting = {// zTree 的数据属性
        data: {
            simpleData: {//使用简单json数据
                enable: true,
            }
        },
        async: {
            enable: true,
            url: "/Role/Manager/MenuBtnCheckedList?id=@Model.RoleId",
            type: "post",
        },
        check: {
            enable: true,
            chkboxType: { "Y": "p", "N": "s" }
        },
        key: {
            checked: "isChecked",
        },
        callback: {
            onAsyncSuccess: treeOnAsyncSuccess,
            onCheck: treeOnCheck,
        },
    };
    $(function () {
        $.Huifold("#Huifold1 .item h4", "#Huifold1 .item .info", "fast", 3, "click");
        $.fn.zTree.init($("#tree1"), setting);
        $("#submitBtn").click(function () {
            var item = this;
            if ($("#roleName").val().trim() == "") {
                layer.msg("请填写必要信息", { icon: 2, time: 2000 });
            }
            else {
                $(item).attr("disabled", "disabled");
                $.ajax({
                    url: "/Role/Manager/EditSubmit",
                    type: "post",
                    data: $("#form1").serialize(),
                    dataType: "json",
                    success: function (data) {
                        if (data.Pass) {
                            parent.table1.ajax.reload();
                            parent.layer.msg(data.Msg, { icon: 1, time: 2000 });
                            parent.layer.close(iframeIndex);
                        }
                        else {
                            layer.msg(data.Msg, { icon: 2, time: 2000 });
                            $(item).removeAttr("disabled");
                        }
                    },
                    error: function (msg) {
                        layer.msg(msg.status, { icon: 2, time: 2000 });
                    }
                });
            }

            return false;
        });
    });


    /**************************Ztree相关的函数***********************************************/
    function treeOnAsyncSuccess() {
        var treeObj = $.fn.zTree.getZTreeObj("tree1");
        treeObj.expandAll(true);
        treeOnCheck();
    }
    function treeOnCheck(event, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree1");
        var value = "";
        var nodes = zTree.getCheckedNodes();
        nodes.sort(function compare(a, b) { return a.id - b.id; });
        for (var i = 0, l = nodes.length; i < l; i++) {
            value += nodes[i].id + ",";
        }
        var valueObj = $("#powerIdStr");
        valueObj.attr("value", value);
    };
    /**************************Ztree相关的函数***********************************************/
</script>